<template>
  <div class="user-container">
    <div class="table-header-btn-wrap">
      <el-select v-model="query.rule" class="m-2" placeholder="角色" style="margin-right: 20px;width: 180px">
        <el-option
            label="全部"
            value=""
        />
        <el-option
            label="管理员"
            value="ADMIN"
        />
        <el-option
            label="前台"
            value="FRONT_USER"
        />
        <el-option
            label="用户"
            value="USER"
        />
      </el-select>
      <el-input v-model="query.name" class="m-2" placeholder="姓名" style="margin-right: 20px;width: 180px"></el-input>
      <el-input v-model="query.username" class="m-2" placeholder="账号"
                style="margin-right: 20px;width: 180px"></el-input>
      <el-button @click="search" v-loading="listLoading">搜索</el-button>

      <el-button @click="reset" v-loading="listLoading">重置</el-button>

      <el-button v-role="['ADMIN']" @click="createUserHandle" v-loading="listLoading">创建前台</el-button>

      <el-button @click="onClickRefresh" v-loading="listLoading">刷新列表</el-button>

    </div>
    <div class="table-wrap" style="height: calc(100% - 100px)">

      <el-table :data="users" border v-loading="listLoading" height="100%" :empty-text="'数据为空'">
        <el-table-column prop="id" label="id" width="50px">
        </el-table-column>
        <el-table-column prop="username" label="账号" width="180px">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="140px">
        </el-table-column>
        <el-table-column prop="username" label="手机号" width="130px">
          <template #default="scope">
          <span>
            {{ scope.row.phone }}
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="rule" label="角色" width="110px">
          <template #default="scope">
            <el-tag v-if="scope.row.rule === 'ADMIN'" type="success">管理员</el-tag>
            <el-tag v-else-if="scope.row.rule === 'FRONT_USER'">前台</el-tag>
            <el-tag v-else-if="scope.row.rule === 'USER'" type="warning">用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60px">
          <template #default="scope">
            <el-tag v-if="scope.row.sex === 'MALE'">男</el-tag>
            <el-tag type="danger" v-else-if="scope.row.sex === 'FEMALE'">女</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100px">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'NORMAL'">正常</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status === 'DISABLED'">禁用</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="registerTime" label="注册时间" width="170px">
          <template #default="scope">
          <span>
            {{ $filters.formatDate(scope.row.registerTime) }}
          </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240px">
          <template #default="scope">
            <el-button type="primary" v-role="['ADMIN']"
                       v-if="scope.row.rule === 'ADMIN' || scope.row.rule === 'FRONT_USER'"
                       @click="editUserHandle(scope.row)">修改信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-wrap"
         style="height: 40px;margin-top: 20px;display: flex;align-items: center;justify-content: space-between;">
      <div class="span" style="font-size: 14px;color: #333;margin-right: 20px;">总数：{{ total }}</div>
      <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="query.page"
          class="mt-4"
          @current-change="pageChange"
          :page-size="query.page_size"
      />
    </div>
    <create-user ref="createUserRef" @created="createdSuccess"></create-user>
    <edit-user ref="editUserRef" @edited="editedSuccess"></edit-user>
  </div>
</template>

<script setup lang="ts">
import $api from '@/api/index'
import {onMounted, reactive, ref} from "vue";
import CreateUser from './user/CreateUser.vue'
import EditUser from "./user/EditUser.vue"

const users = ref([])
const total = ref(0)
var listLoading = ref(false)

onMounted(() => {
  getList()
})
const query = reactive({
  page: 1,
  page_size: 20,
  rule: '',
  name: '',
  username: ''
})

const reset = () => {
  query.page = 1
  query.rule = ''
  query.name = ''
  query.username = ''
  search()
}

const search = () => {
  query.page = 1
  getList()
}

const pageChange = (page: number) => {
  query.page = page
  getList()
}
const getList = () => {
  users.value = []
  listLoading.value = true
  $api.userApi.fetchList(query).then((res: any) => {
    users.value = res.results
    total.value = res.total
    listLoading.value = false
  }).catch(() => {
    listLoading.value = false
  })
}

const onClickRefresh = () => {
  query.page = 1
  getList()
}

/**
 * 创建前台用户
 */
const createUserRef = ref()
const createUserHandle = () => {
  createUserRef.value.showDialog = true
  createUserRef.value.dialogModel = 'create'
  createUserRef.value.create()
}
const createdSuccess = () => {
  createUserRef.value.showDialog = false
  onClickRefresh()
}

/**
 * 修改用户
 */
const editUserRef = ref()
const editUserHandle = (row: any) => {
  editUserRef.value.showDialog = true
  editUserRef.value.edit(row)
}
const editedSuccess = () => {
  editUserRef.value.showDialog = false
  onClickRefresh()
}


</script>

<style scoped lang="scss">
.user-container {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.table-header-btn-wrap {
  margin-bottom: 20px;
}
</style>